<template>
  <div class="radar">
    <div :id="echartId" class="echart-box"></div>
    <div class="radar-title">
      <div class="radar-title__item" v-for="(item, index) in props.titleList" :key="index">
        <div class="radar-title__item-left">
          <span class="icon"></span>
          <span>{{ item.label }}</span>
        </div>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 例如：import 《组件名称》 from '《组件路径》';
import { defineComponent, markRaw, onMounted, onUnmounted, reactive, toRefs } from 'vue';
import * as ec from 'echarts';

const props = defineProps(['echartId', 'pieData', 'titleList']);
// 这里存放数据
const propData = markRaw(props);
const data: any = reactive({
  myChart: '',
  colorList: ['#e7aa83', '#f2843c', '#e45a00', '#ab5d2b', '#da731e'],
});

const drwaEchart = () => {
  if(data.myChart)ec.dispose(data.myChart)
  const chartDom: any = document.getElementById(propData.echartId);
  data.myChart = markRaw(ec.init(chartDom));
  let option = {
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
      },
      radius: '55%',
      center: ['40%', '50%'],
      indicator: [
        { name: 'N', max: 10, color: '#ffffff' },
        { name: 'NE', max: 10, color: '#6a7c95' },
        { name: 'E', max: 10, color: '#ffffff' },
        { name: 'SE', max: 10, color: '#6a7c95' },
        { name: 'S', max: 10, color: '#ffffff' },
        { name: 'SW', max: 10, color: '#6a7c95' },
        { name: 'W', max: 10, color: '#ffffff' },
        { name: 'NW', max: 10, color: '#6a7c95' },
      ],
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        //指向外圈文本的分隔线样式
        lineStyle: {
          color: '#0075e6',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#0075e6', // 分隔线颜色
          width: 2, // 分隔线线宽
        },
      },
    },
    series: [
      {
        name: '',
        type: 'radar',
        symbolSize: 3,
        data: [
          {
            itemStyle: {
              color: '#4077f2',
            },
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: 'linear',
                  x: 1, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,132,255,0)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,132,255,1)',
                    },
                  ],
                  globalCoord: false,
                },
                opacity: 1, // 区域透明度
              },
            },
            value: [8, 10, 5, 4, 2, 5, 4, 2],
          },
        ],
      },
    ],
  };

  option && data.myChart.setOption(option);
};
onMounted(() => {
  window.addEventListener('resize', (e) => {
    data.myChart && data.myChart.resize();
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', drwaEchart);
});
defineExpose({
  drwaEchart,
});
</script>

<style scoped lang="less">
.radar {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  .echart-box {
    height: 220px;
    width: 60%;
  }

  .radar-title {
    background: rgba(16, 34, 71, 0.6);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    width: 40%;
    .radar-title__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0em;

      color: #d4e8f8;
      margin-bottom: 16px;
      .radar-title__item-left {
        display: flex;
        align-items: center;
        .icon {
          display: inline-block;
          background: #0084ff;
          height: 6px;
          width: 6px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
    .radar-title__item:nth-last-of-type(1) {
      margin-bottom: 0px !important;
    }
  }
}
</style>
